import styled from "styled-components";

export const MusicClubTopListBox = styled.div`
  background-color: #fafafa;
  padding: 30px 0;
  .main{
    display: flex;
    /* height: 800px; */
    >div:nth-child(1){
      width: 240px;
      /* border: 1px solid #3ac27c; */
      border-right: 1px solid #3ac27c;
    }
    >div:nth-child(2){
     width: calc(100% - 240px);
     padding-left: 20px;
    }
    .left{
      ul li {
        display: flex;
        align-items: center;
        padding-left: 20px;
        height: 60px;
        /* background-color: aliceblue; */
        /* margin-bottom: 20px; */
        cursor: pointer;
        img{
          width: 40px;
          height: 40px;
        }
        .info{
          padding-left: 10px;
          display: flex;
          height: 100%;
          justify-content: center;
          flex-direction: column;
          span{
            font-size: 14px;
          }
        }
        &.active{
          background-color: #3ac27c;
          color: #ffffff;
        }
      }
    }
    .right{
      font-size: 14px;
      .right_header{
        display: flex;
        height: 50px;
        color: #999999;
        >div:nth-child(1){
          width: 50px;
        }
        >div:nth-child(2){
          flex: 1;
        }
        >div:nth-child(3){
          width: 200px;
        }
        >div:nth-child(4){
          width: 50px;
        }
      }
      .right_body{
        
        /* height: 80px; */
        
        .item{
          display: flex;
          align-items: center;
          height: 80px;
          >div:nth-child(1){
          width: 50px;
          }
          >div:nth-child(2){
            flex: 1;
            height: 100%;
          }
          >div:nth-child(3){
            width: 200px;
          }
          >div:nth-child(4){
            width: 50px;
          }
          &:hover{
            .anniu{
              opacity: 1 !important;
            }
          }
          .active{
              color:#ff4222;
          
          }
          .item_name{
            position: relative;
            display: flex;
            align-items: center;
            .item_name_name {
              margin-left: 15px;
            }
            .anniu{
              position: absolute;
              right: 20px;
              font-size: 26px;
              color: #999999;
              >span:hover{
                color: #3ac27c;
                cursor: pointer;
              }
              opacity: 0;
              transition: all .4s;
            }
          }
        }
      }
    }
  }
  .comment{
    padding-left: 245px;
  }

  .ant-anchor-wrapper{
    position: fixed;
    top: 165px;
    left: 50px;
  }
`